<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { $t } from '@/locales';
import { useForm, useFormRules } from '@/hooks/common/form';
import { ApiSysUserLockOut, ApiSysUserLoginRuleQuery } from '@/api-services';
import { NetoKit } from '@/typings/neto';
import { SysuserlockApi } from '@/api-services/apis/sysuserlock-api';
import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';

defineOptions({
  name: 'UserLockOperateModal'
});
interface Props {
  /** the type of operation */
  operateType: UI.TableOperateType;
  /** the edit row data */
  editId?: number | null;
}


const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const { formRef, validate, restoreValidation} = useForm();



type Model = NetoKit.NullToUndefined<ApiSysUserLockOut>;
const model = ref(createDefaultModel());
function createDefaultModel(): Model {
  return {
    id: 0
  };
}

async function handleInitModel() {
  model.value = createDefaultModel();

  if (props.operateType === 'edit' && props.editId) {
    const [err, res] = await feature(getAPI(SysuserlockApi).get(props.editId));
    queryDone(err, () => {
      const data = res?.data.data;
      if (data) {
        Object.assign(model.value, data);
      }
    })
  }
}


watch(visible, () => {
  if (visible.value) {
    handleInitModel();
    restoreValidation();
    // getRoleOptions();
  }
});


function formatDate(dateStr: undefined | Date) {
  if (!dateStr) return $t('common.noData');
  const date = new Date(dateStr);
  return date.toLocaleString();
}

function getLoginRuleTypeName(type: 1 | 2 | undefined) {
  if (type === 1 || type === 2) {

    const ruleTypes = {
      1: $t('page.manage.common.loginRuleTypeEnum.pwd'),
      2: 'IP',
    };
    return ruleTypes[type];
  }
}

</script>

<template>

  <NModal v-model:open="visible" :title="$t('common.detail')" modal-height="" width="800px" :show-footer="false">

    <ElForm ref="formRef" :model="model" label-width="auto">
      <ElRow :gutter="16">
        <ElCol :lg="12" :xs="24">
          <ElFormItem label="ID" name="id" class="form-item">
            <span class="form-value">{{ model.id }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <ElFormItem :label="$t('common.creationTime')" name="creationTime" class="form-item">
            <span class="form-value">{{ formatDate(model.creationTime) }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <ElFormItem label="IP" name="ip" class="form-item">
            <span class="form-value">{{ model.ip || $t('common.noData') }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <!-- 锁定原因 -->
          <ElFormItem :label="$t('page.manage.userLock.reason')" name="reason" class="form-item">
            <span class="form-value">{{ model.reason || $t('common.noData') }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <!-- 锁定开始时间 -->
          <ElFormItem :label="$t('page.manage.userLock.lockStartTime')" name="lockStartTime" class="form-item">
            <span class="form-value">{{ formatDate(model.lockStartTime) }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <!-- 锁定结束时间 -->
          <ElFormItem :label="$t('page.manage.userLock.lockEndTime')" name="lockEndTime" class="form-item">
            <span class="form-value">{{ formatDate(model.lockEndTime) }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <!-- 登录规则类别 -->
          <ElFormItem :label="$t('page.manage.common.loginRuleType')" name="loginRuleType" class="form-item">
            <span class="form-value">{{ getLoginRuleTypeName(model.loginRuleType as 1 | 2 | undefined) }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <ElFormItem :label="$t('page.manage.userLock.ruleId')" name="ruleId" class="form-item">
            <span class="form-value">{{ model.ruleId || $t('common.noData') }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <ElFormItem :label="$t('page.manage.userLock.lockUserName')" name="lockUserName" class="form-item">
            <span class="form-value">{{ model.lockUserName || $t('common.noData') }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <!-- 是否手动解锁 -->
          <ElFormItem :label="$t('page.manage.userLock.isManualUnlock')" name="isManualUnlock" class="form-item">
            <ElTag :type="model.isManualUnlock ? 'success' : 'warning'" class="status-tag">
              {{ model.isManualUnlock ? $t('common.yesOrNo.yes') : $t('common.yesOrNo.no') }}
            </ElTag>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <!-- 手动解锁时间 -->
          <ElFormItem :label="$t('page.manage.userLock.manualUnlockTime')" name="manualUnlockTime" class="form-item">
            <span class="form-value">{{ model.isManualUnlock ? formatDate(model.manualUnlockTime) :
              $t('page.manage.userLock.isNotManualUnlock') }}</span>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :xs="24">
          <!-- 执行手动解锁的用户 -->
          <ElFormItem :label="$t('page.manage.userLock.manualUnlockUserName')" name="manualUnlockUserName"
            class="form-item">
            <span class="form-value">{{ model.isManualUnlock ? (model.manualUnlockUserName || $t('common.noData')) :
              $t('page.manage.userLock.isNotManualUnlock') }}</span>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
  </NModal>

</template>

<style scoped>
.card-container {
  margin: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

.custom-form {
  padding: 16px 0;
}

.form-item {
  margin-bottom: 16px;
}

.form-item .ant-form-item-label {
  padding-bottom: 4px;
}

.form-item .ant-form-item-label label {
  color: #6b7280;
  font-weight: 500;
  font-size: 14px;
}

.form-value {
  display: inline-block;
  padding: 4px 8px;
  background-color: #f9fafb;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  min-height: 32px;
  width: 100%;
  color: #1f2937;
  font-size: 14px;
  word-break: break-all;
}

.status-tag {
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
  font-size: 14px;
}
</style>
